<template>

  <div class="cards">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>新增假期类型</span>
        </div>
      </template>

      <div class="first">
        <div class="information">
          <el-form ref="ruleFormRef" label-width="200px" :rules="rules" :model="ruleForm" class="demo-ruleForm">
            <el-form-item class="required" label="假期名称:" prop="holidayName">
              <el-input v-model="ruleForm.type" type="text"></el-input>
            </el-form-item>
            <el-form-item class="xrequired" label="是否受天数影响:" prop="isWeather">
              <el-select class="xrequired" v-model="ruleForm.limitDays" placeholder="---请选择---">
                <el-option label="是" value="1" />
                <el-option label="否" value="0" />
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button @click="submitForm()" type="primary">
                提交
              </el-button>
              <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-card>
  </div>

</template>
<script setup lang="ts">
import { reactive, ref } from 'vue';
import { ElForm } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus'
import type { addLeave } from '@/model';
import { AddLeave } from '@/api/leaveType';

const ruleFormRef = ref<FormInstance>()
const ruleForm = ref<addLeave>({
  type: '',
  limitDays: 0
}
)
const submitForm = async () => {
  const res = await AddLeave(ruleForm.value);
}
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
interface RuleForm {
  type: string,
  limitDays: number,
}

const rules = reactive<FormRules<RuleForm>>({
  type: [
    { required: true, message: '请输入假期名称', trigger: 'blur' },
  ],
  limitDays: [
    { required: true, message: '请选择是否受天数影响', trigger: 'change' }
  ],
})



</script>
<style scoped>
.cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.el-card {
  width: 100%;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-form-item {
  display: flex;


}

.required .el-form-item__label::before {
  content: '*';
  color: red;
  margin-right: 0px;
  /* 控制星号与标签文本之间的间距 */
}
</style>
